<template>
    <div v-html="getHtmlData" :class="$props.class" class="markdown-viewer"></div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import showdown from 'showdown'

const converter = new showdown.Converter()
converter.setOption('tables', true)
const props = defineProps({
    value: { type: String },
    class: { type: String }
})
const getHtmlData = computed(() => converter.makeHtml(props.value || ''))
</script>

<style lang="less" scoped>
.markdown-viewer {
    width: 100%;
}
</style>